<template>
    <view class="calendar_container">
        <fl-navBar dark :border="false" title="工作日程" left-icon="left" color="#333333" :fixed="true" background-color="#fff" status-bar />
        <view class="calendar">
            <wu-calendar @foldSwitch="foldSwitch" fold :type="calendarType" @onceData="onceData" slideSwitchMode="none"
                useToday @monthSwitch="monthSwitch" :showMonth="false" @change="handleChange" :selected="selected"
                color="#0d80d7" />
            <view class="calendarType">{{ calendarType === 'week' ? '周视图' : '月视图' }}</view>
        </view>
        <view class="currentThing" v-if="listItem.noteDay">
            <view class="currentDate">{{ fiData(listItem.noteDay, '-') }}</view>
        </view>
        <scroll-view class="scroll_view" scroll-y>
            <uni-swipe-action>
                <uni-swipe-action-item v-if="listItem.noteList.length > 0" v-for="(ele, index) in listItem.noteList"
                    :key="index">
                    <view class="spiper_box" @tap="goDetail(ele)">
                        <view :class="ele.noteType === 'report' ? 'things_item' : 'things_item own'">
                            <view class="things_type">【{{ ele.noteType === 'report' ? '外出报备' : '个人日程' }}】{{ ele.content }}
                            </view>
                            <view class="things_time">{{ ele.name }} {{ ele.startTime }}-{{ ele.endTime }}</view>
                        </view>
                    </view>
                    <template v-slot:right>
                        <!-- <view class="edit" @tap="handleEdit(ele)">编辑</view>
                        <view class="delete" @tap="deleteSchdule(ele)">删除</view> -->
                    </template>
                </uni-swipe-action-item>
                <fl-empty v-else />
            </uni-swipe-action>

        </scroll-view>
        <view class="add_calendar" @tap="toPlanAdd">
            新建日程
        </view>
    </view>
</template>

<script  setup>
import { getnowManage, getownManageDelete, deleteManage } from '@/api/http'
import { onLoad, onShow } from "@dcloudio/uni-app";
import modal from '@/plugins/modal';
import { ref, nextTick } from 'vue'
const para = ref({
    startDate: '',
    endDate: ''
})
const selected = ref([])
const calendarType = ref('month')
const listItem = ref({
    noteList: []
})
onShow(() => {
    nextTick(() => {
        getList()
    })
})

// 去 报备详情或者日程详情
const goDetail = (ele) => {
    if (ele.noteType === 'report') {
        uni.navigateTo({
            url: '/pages/planAdd/index?id=' + ele.id + '&type=1'
        })
    } else {
        uni.navigateTo({ url: '/pages/planAdd/index?id=' + ele.id + '&type=111' })
    }
}

const foldSwitch = (e) => {
    if (e.type === 'month') {
        calendarType.value = 'week'
        monthSwitch(e)
    } else {
        calendarType.value = 'month'
        monthSwitch(e)
    }

}
const getList = async () => {
    const res = await getnowManage(para.value)
    if (res.data.length > 0) {
        let result = res.data.map(ele => {
            return {
                date: ele.noteDay,
                badge: true,
                badgePosition: 'bottom-center',
                badgeSize: '10rpx',
                infoColor: '#dedcdc',
                noteDay: ele.noteDay,
                noteList: ele.noteList
            }
        })
        selected.value = result
        listItem.value = res.data[0]
    } else {
        selected.value = []
        listItem.value = {
            noteList: []
        }
    }


}
const fiData = (ele, t, num = 3) => {
    let newArr = ele.split(t)
    if (num == 3) return newArr[0] + '年' + newArr[1] + '月' + newArr[2] + '日'
    if (num == 2) return newArr[0] + '年' + newArr[1] + '月' + '01日'

}
const toPlanAdd = () => {
    uni.navigateTo({ url: '/pages/planAdd/index?type=add' })
}
// const handleEdit = (ele) => {
//     uni.navigateTo({ url: '/pages/planAdd/index?id=' + ele.id + '&type=2' })
// }
const handleChange = (e) => {
    let newStr = e.year + '-' + zero(e.month) + '-' + zero(e.date)
    let current = selected.value.findIndex(ele => {
        return newStr === ele.date
    })
    if (current > -1) {
        listItem.value = selected.value[current]
        resetCor()
        selected.value[current].infoColor = '#0D80D7'
    } else {
        listItem.value = {
            noteDay: newStr,
            noteList: []
        }
    }

}
// 初始化颜色在 选中颜色
const resetCor = () => {
    selected.value.forEach(ele => {
        ele.infoColor = '#dedcdc'
    })
}
// 初始化页面调用一次
const onceData = (e) => {
    para.value = filterData(e)
}
const filterData = (data) => {
    let type;
    if (calendarType.value === 'week') {
        type = 0
    } else {
        type = 5
    }
    let { cDay, cMonth, cYear } = data[0][0].lunar
    let endObj = data[type][data[type].length - 1].lunar
    let startDate = cYear + '/' + zero(cMonth) + '/' + zero(cDay)
    let endDate = endObj.cYear + '/' + zero(endObj.cMonth) + '/' + zero(endObj.cDay)
    return {
        startDate,
        endDate
    }
}
const monthSwitch = (e) => {
    para.value = filterData(e.current)
    getList()
}
const zero = (date) => {
    return date < 10 ? '0' + date : date
}
// 删除
// const deleteSchdule = async (ele) => {
//     let one = ele.noteType === 'report' ? '外出报备' : '个人日程'
//     let str = `是否确认删除${ele.name}${ele.startTime}-${ele.endTime}期间的${one}的数据项？`
//     const res = await modal.confirm(str)
//     if (res) {

//         if (ele.noteType === 'report') {
//             await deleteManage(ele.id)
//         } else {
//             await getownManageDelete(ele.id)
//         }
//         getList()
//         modal.msgSuccess('操作成功')

//     }


// }
</script>
  
<style lang="scss">
.spiper_box {
    box-sizing: border-box;

    margin-bottom: 15rpx;

}

page {
    height: 100%;
    background-color: #fff;

    .calendar_container {
        height: 100%;
        display: flex;
        flex-direction: column;

        .calendar {
            position: relative;
            // overflow: hidden;
            // background-color: red;
            // height: 600rpx;
            margin-bottom: 10rpx;

            .calendarType {
                position: absolute;
                left: 50rpx;
                top: 25rpx;
                font-size: 32rpx;
                color: #0D80D7;
                font-weight: 700;
            }

        }

        .currentThing {
            font-size: 32rpx;
            font-weight: 700;
            color: #333;
            margin: 40rpx 0 20rpx 0;
            padding-left: 30rpx;
        }

        .scroll_view {
            flex: 1;
            width: 92%;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            background-color: #fff;

            .edit,
            .delete {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 140rpx;
                background-color: red;
                height: 125rpx;
                font-size: 24rpx;
                color: #fff;
            }

            .edit {
                background-color: #0d80d7;
            }

            .own {
                background-color: #f3f9ff !important;
                border-left: 4rpx solid #0D80D7 !important;
            }

            .things_item {
                overflow: hidden;
                box-sizing: border-box;
                margin: 0 auto;
                width: 100%;
                background-color: #FFF9EE;
                border-left: 4rpx solid orange;
                padding: 20rpx 0;
                border-radius: 10rpx 0 0 10rpx;
                margin-bottom: 16rpx;
                height: 125rpx;


                .things_type {
                    padding-left: 15rpx;
                    margin-bottom: 6rpx;
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 700;
                    margin-bottom: 15rpx;
                }

                .things_time {
                    padding-left: 29rpx;
                    font-size: 28rpx;
                    color: #666666;
                }
            }
        }

        .add_calendar {
            width: 685rpx;
            height: 88rpx;
            border-radius: 44rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 32rpx;
            background-color: #0d80d7;
            margin: 20rpx auto 20rpx;
        }
    }
}
</style>
  